<template>
	<el-form class="" :model="file" label-width="80px">
		<el-form-item label="文件名称"><el-input v-model="file.fileName" disabled></el-input></el-form-item>
		<el-form-item label="下载文件"><a :href="'/fileServer/'+file.filePath">下载</a></el-input></el-form-item>
		<el-form-item label="文件类型" >
			<el-select  v-model="file.fileTypeId" placeholder="请选择文件类型">
				<el-option v-for="fileType in fileTypeList"  :key="fileType.id" :label="fileType.type" :value="fileType.id"></el-option>
			</el-select>

		</el-form-item>
		<el-form-item >
			<el-button type="primary" @click="update">更新</el-button>
			<el-button @click="goBack">返回</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "axios";

const OK = 200;
const router = useRouter();
const route = useRoute();

const file = ref({});
const fileTypeList = ref([]);

const get = async (id) => {
  try {
    const res = await axios.get("/api/files/" + id);
    if (res.data.code === OK) {
      file.value = res.data.data;
    } else {
      ElMessage.error(res.data.message);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("获取文件信息失败");
  }
};

const update = async () => {
  try {
    const res = await axios.put("/api/files/", file.value);
    if (res.data.code === OK) {
      ElMessage.success("更新文件成功");
      router.push({ name: "FileList" });
    } else {
      ElMessage.error(res.data.message);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("更新文件失败");
  }
};

const goBack = () => {
  router.back();
};

onMounted(() => {
  const id = route.query.id;
  get(id);
});

watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      get(newId);
    }
  }
);
</script>

<style scoped="scoped">
</style>
